{% extends 'base.html' %}
{% block title %}{{ image.title }}{% endblock %}
{% block content %}
    <h1>{{ image.title }}</h1>
   {% load thumbnail %}
    {% thumbnail image.image "300x300" crop="100%" as im %}
        <a href="{{ image.image.url }}">
            <img src="{{ im.url }}" class="image-detail">
        </a>
    {% endthumbnail %}
    {% with total_likes=image.user_like.count users_like=image.user_like.all%}
    <div class="image-info">
        <div>
            <span class="count">
                <span class="total">{{ total_likes }}</span>
                like{{ total_likes|pluralize }}
            </span>
            <span class="count">
                <span class="total">{{ total_views }}</span>
                view{{ total_views|pluralize }}
            </span>
        <a href="#" data-id="{{ image.id }}"
           data-action="{% if request.user in users_like %}un{% endif %}like" class="like button">
        {% if request.user in users_like %}
        Unlike
        {% else %}
        Like
        {% endif %}
        </a>
        </div>
        {{ image.description|linebreaks }}
    <div class="image-likes">
        {% for user in image.user_like.all %}
            <div>
                <img src="{{ user.profile.photo.url }}">
                <p>{{ user.first_name }}</p>
            </div>
        {% empty %}
            <p class="error" >No body likes this images yet.</p>
        {% endfor %}
    </div>
{% endwith %}
    </div>
{% endblock %}
{% block domready %}
    $('a.like').click(function(e){
        e.preventDefault();
        $.post('{% url "images:like" %}',
            {
                id: $(this).data('id'),
                action: $(this).data('action')
            },
            function(data){
                if (data['status'] !== 'ko')
                {
                    var previous_action = $('a.like').data('action');

                    // 更换 data-action
                    $('a.like').data('action', previous_action == 'like' ? 'unlike' : 'like');
                    // toggle link text
                    $('a.like').text(previous_action == 'like' ? 'Unlike' : 'Like');

                    // 更新 total likes
                    var previous_likes = parseInt($('span.count .total').text()); //获取当前字符串转换成数字
                    $('span.count .total').text(previous_action == 'like' ? previous_likes += 1 : previous_likes -= 1);
                    divs = ''
                    for(i in data){
                            div = "<div><img src="+ data[i][1] + "><p>" + data[i][0]+'</p></div>'
                            divs += div
                            }

                $('.image-likes').html(parseInt($('span.count .total').text()) == 0 ?
                '<p class="error"> No body likes this images yet.</p>':divs)
                $('span.count').html(previous_likes == 1? '<span class="total">1</span> like' :
                '<span class="total">'+previous_likes+'</span> likes')





                }
        });

    });
{% endblock %}